<template>
  <div class="main_margin">
    <el-row>
      <el-col :span="7">
        <div style="border: #fff 1px solid"></div>
      </el-col>
      <el-col :span="10">
        学校名称:<el-input
          v-model="schoolname"
          style="width: 300px; margin-left: 10px"
          placeholder="请输入内容"
        ></el-input>
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="searchSchoolByName()"
          >查询</el-button
        >
      </el-col>
    </el-row>
    <el-row style="margin-top: 30px">
      <el-col :span="19">
        <div style="border: #fff 1px solid"></div>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="showinsertCategory()">新增</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="3">
        <div style="border: #fff 1px solid"></div>
      </el-col>
      <el-col :span="18">
        <el-table
          border
          :data="tableData"
          class="tablecss"
          :row-style="{ height: '30px' }"
          :header-cell-style="{ 'font-size': '13px', 'font-family': '宋体' }"
        >
          <el-table-column prop="RUID" width="180"> </el-table-column>
          <el-table-column prop="name" label="学校名称" width="250">
          </el-table-column>
          <el-table-column prop="shortname" label="学校简称" width="180">
          </el-table-column>
          <el-table-column prop="adminuserid" label="管理员" width="130">
          </el-table-column>
          <el-table-column prop="createtime" label="创建时间" width="200">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="showupdateCategory(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="showresetPwd(scope.$index, scope.row)"
                >重置密码</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="delClick(scope.index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pagesizes"
          :page-size="pagesize"
          layout="sizes, prev, pager, next"
          :total="recordcount"
        >
        </el-pagination>
      </el-col>
    </el-row>

    <!-- 编辑 -->
    <el-dialog
      :title="insorup == true ? '新增学校' : '编辑学校信息'"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item
          label="学校名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="学校简称"
          :label-width="formLabelWidth"
          prop="shortname"
        >
          <el-input v-model="form.shortname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="管理员"
          :label-width="formLabelWidth"
          prop="adminuserid"
        >
          <el-input
            v-model="form.adminuserid"
            autocomplete="off"
            placeholder="请使用英文或数字"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="真实姓名"
          :label-width="formLabelWidth"
          prop="adminusername"
          v-if="insorup == true"
        >
          <el-input v-model="form.adminusername" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          :label-width="formLabelWidth"
          prop="adminpassword"
          v-if="insorup == true"
        >
          <el-input
            type="password"
            v-model="form.adminpassword"
            autocomplete="off"
            placeholder="请输入6位及以上密码"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="咨询电话"
          :label-width="formLabelWidth"
          prop="tel"
          v-if="insorup == false"
        >
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="版权 "
          :label-width="formLabelWidth"
          prop="copyright"
          v-if="insorup == false"
        >
          <el-input v-model="form.copyright" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="logo图"
          :label-width="formLabelWidth"
          v-if="1 == 1"
        >
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <el-button type="primary" @click="showImg">预览</el-button>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdateCategory">取 消</el-button>
        <el-button type="primary" @click="sureCategory">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="imageUrl" alt="" />
    </el-dialog>

    
    <!-- 重置密码 -->
    <el-dialog
      title="重置密码"
      :visible.sync="resetpwdVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <span>确认是否重置密码？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetpwdCancel()">取 消</el-button>
        <el-button type="primary" @click="resetPwd">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 重置密码 -->

    <!-- 删除 -->
    <el-dialog
      title="信息"
      :visible.sync="deleteVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <span>确认是否删除当前分类？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delCancel()">取 消</el-button>
        <el-button type="primary" @click="delSchool">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 删除 -->

  </div>
</template>
<script>
import { entitylist, saveObject, saveObjects } from "../../api/admin";
export default {
  name: "schoolmanager",
  data() {
    var checkPhone = (rule, value, callback) => {
      const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/;
      if (!value) {
        return callback(new Error("电话号码不能为空"));
      }
      setTimeout(() => {
        // Number.isInteger是es6验证数字是否为整数的方法,但是我实际用的时候输入的数字总是识别成字符串
        // 所以我就在前面加了一个+实现隐式转换

        if (!Number.isInteger(+value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (phoneReg.test(value)) {
            callback();
          } else {
            callback(new Error("电话号码格式不正确"));
          }
        }
      }, 100);
    };
    return {
      resetpwdVisible:false,
      deleteVisible:false,
      schoolname: "",
      recordcount: 0,
      pagesizes: [10, 15, 30, 50],
      pagesize: 10,
      currentPage: 1,
      tableData: [],
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false,
      dialogFormVisible: false,
      insorup: false, //判断是新增还是修改(true为新增,false为修改)
      formLabelWidth: "120px",
      form: {
        RUID: "",
        adminuserid: "",
        adminusername: "",
        createtime: "",
        shortname: "",
        name: "",
        copyright: "",
        tel: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入学校名称",
            trigger: "blur",
          },
        ],
        shortname: [
          {
            required: true,
            message: "请输入学校简称",
            trigger: "blur",
          },
        ],
        adminuserid: [
          {
            required: true,
            message: "请输入管理员",
            trigger: "blur",
          },
        ],
        adminusername: [
          {
            required: true,
            message: "请输入真实姓名",
            trigger: "blur",
          },
        ],
        adminpassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            message: "请输入6位及以上密码",
            trigger: "blur",
          },
        ],
        copyright: [
          {
            required: true,
            message: "请输入版权",
            trigger: "blur",
          },
        ],
        tel: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
          // { validator: checkPhone, trigger: "blur" }
        ],
      },
    };
  },
  methods: {
    searchSchoolByName() {
      this.currentPage = 1;
      this.pagesize = 10;
      this.getSchoolInf();
    },
    getSchoolInf() {
      var params = {};
      if (this.schoolname != "") {
        params = {
          pageno: this.currentPage - 1,
          pagesize: this.pagesize,
          type: "customer",
          codeflag: "1",
          filter: [
            { fieldname: "name", relationop: "like", word: this.schoolname },
          ],
          field:
            "RUID,name,createtime,customercode,adminusername,adminuserid,copyright,tel,shortname",
        };
      } else {
        params = {
          pageno: this.currentPage - 1,
          pagesize: this.pagesize,
          type: "customer",
          codeflag: "1",
          field:
            "RUID,name,createtime,customercode,adminusername,adminuserid,copyright,tel,shortname",
        };
      }

      entitylist(params).then((res) => {
        if (res.cxajaxrc == "0") {
          this.recordcount = res.recordcount;
          this.tableData = res.recordlist;
        } else {
          this.$message.error("菜单列表:检索资料时发生错误");
        }
      });
    },
    insertCategory() {
      //新增路由
      this.$refs["form"].validate((valid) => {
        if (valid) {
          saveObject({
            type: "customer",
            codeflag: "1",
            object: {
              name: this.form.name,
              shortname: this.form.shortname,
              adminuserid: this.form.adminuserid,
              adminusername: this.form.adminusername,
              adminpassword: this.form.adminpassword,
              createtime: new Date().format("yyyy-MM-dd hh:mm:ss"),
            },
          }).then((res) => {
            if (res.cxajaxrc == "0") {
              this.$message.success("新增成功!");
              this.currentPage = 1;
              this.pagesize = 10;
              this.getSchoolInf();
              this.dialogFormVisible = false;
            } else {
              this.$message.error("新增错误!!");
            }
          });
        } else {
          this.$message.error("请输入完整!!");
          return false;
        }
      });
    },
    updateCategory() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          saveObject({
            type: "customer",
            codeflag: "1",
            object: {
              RUID: this.form.RUID,
              name: this.form.name,
              shortname: this.form.shortname,
              adminuserid: this.form.adminuserid,
              adminusername: this.form.adminusername,
              adminpassword: this.form.adminpassword,
            },
          }).then((res) => {
            if (res.cxajaxrc == "0") {
              this.$message.success("修改成功!");
              this.currentPage = 1;
              this.pagesize = 10;
              this.getSchoolInf();
              this.dialogFormVisible = false;
            } else {
              this.$message.error("修改错误!!");
            }
          });
        } else {
          this.$message.error("请输入完整!!");
          return false;
        }
      });
    },
    sureCategory() {
      if (this.insorup) {
        this.insertCategory(); //新增
      } else {
        this.updateCategory(); //修改
      }
    },
    showinsertCategory() {
      this.insorup = true;
      this.dialogFormVisible = true;
    },
    showupdateCategory(index, row) {
      this.insorup = false;
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.form.RUID = row.RUID;
        this.form.name = row.name;
        this.form.adminuserid = row.adminuserid;
        this.form.adminusername = row.adminusername;
        this.form.createtime = row.createtime;
        this.form.shortname = row.shortname;
        this.form.copyright = row.copyright;
        this.form.tel = row.tel;
      });
    },
    cancelUpdateCategory() {
      this.imageUrl = "";
      this.$refs["form"].resetFields();
      this.dialogFormVisible = false;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1;
      this.getSchoolInf();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getSchoolInf();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    delClick(index,row){
      this.form.RUID = row.RUID;
      this.deleteVisible = true;
    },
    delCancel(){
      this.form.RUID = "";
      this.deleteVisible = false;
    },
    delSchool(){ 
      console.log(this.form.RUID);
    },
    showresetPwd(index,row){
      this.form.RUID = row.RUID;
      this.resetpwdVisible = true;

    },
    resetPwd(){
      console.log(this.form.RUID);
    },
    resetpwdCancel(){
      this.form.RUID = "";
      this.resetpwdVisible = false;
    },
    showImg(){
      this.dialogVisible = true;
    }
  },
  beforeMount: function () {
    this.getSchoolInf();
  },
};
</script>
<style>
.main_margin {
  background-color: #fff;
  margin: 10px;
  height: 100%;
  padding: 20px;
}
.tablecss {
  width: 100%;
  margin: 20px 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>